<template>
    <div>


        <h2>智慧校园物资管理</h2>

        <el-form ref="MaterailForm" :model="formData" :rules="rules" size="medium" label-width="100px" label-position="top">
            <el-form-item label="物资类型" prop="mtitle">
                <el-select v-model="formData.mtitle" placeholder="请选择物资类型" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in mtitleOptions" :key="index" :label="item.label" :value="item.value"
                        :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物品描述" prop="mdescription">
                <el-input v-model="formData.mdescription" placeholder="非必要选项" clearable prefix-icon='el-icon-receiving'
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="库存数" prop="mstock">
                <el-input-number v-model="formData.mstock" placeholder="库存数" :step='1'></el-input-number>
            </el-form-item>

            <el-form-item size="large" style="margin: auto;">
                <el-button id="bobutton" type="success" icon="el-icon-thumb" @click="submitForm"
                    style="width: 100% ; height:50px ;margin: auto;padding: auto;">提交</el-button>

                <br>

                <hr>
                <h3>
                    注意！！非开发人员请勿使用此选项
                </h3>
                <el-button id="bobutton" type="danger" icon="el-icon-refresh-right" @click="SyncData"
                    style="width: 100% ; height:50px ;margin: auto;padding: auto;">数据库同步</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { request } from "@/axios/request";
export default {
    components: {},
    props: [],
    data() {
        return {
            formData: {
                mtitle: undefined,
                mdescription: "",
                mstock: undefined,
            },
            rules: {
                mtitle: [{
                    required: true,
                    message: '请选择物资类型',
                    trigger: 'change'
                }],
                mdescription: [{
                    required: true,
                    message: '非必要选项',
                    trigger: 'blur'
                }],
                mstock: [{
                    required: true,
                    message: '库存数',
                    trigger: 'blur'
                }],
            },
            mtitleOptions: [{
                "label": "医疗用品",
                "value": "医疗用品"
            }, {
                "label": "食品",
                "value": "食品"
            }, {
                "label": "学习用具",
                "value": "学习用具"
            }, {
                "label": "工具",
                "value": "工具"
            }, {
                "label": "空闲场地",
                "value": "场地"
            }],
        }
    },
    methods: {
        submitForm() {
            this.$refs['MaterailForm'].validate(valid => {
                if (!valid) return

                console.log(this.formData)

                request({
                    url: "/Material/add",
                    data: this.formData,
                    method: "put",
                })
                    .then((res) => {
                        this.$message({
                            message: res.data.msg,
                            type: "success",
                        });

                    })
                    .catch((error) => {
                        this.$message({
                            message: error.response.data.msg,
                            type: "error",
                        });
                    });


                // TODO 提交表单
            })
        },

        SyncData() {
            request({
                url: "/Material/SyncAny",
                method: "get",
            })
                .then((res) => {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });

                })
                .catch((error) => {
                    this.$message({
                        message: error.response.data.msg,
                        type: "error",
                    });
                });

        }
    }
}

</script>
<style></style>
  